<template>
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <div style="display: flex;justify-content: center;margin-top: 5px;">
        <img :src="zzitem?.web_url" alt="" style="width: 50px;height: 50px;border-radius: 100%;">
    </div>
    <div class="jz">{{ zzitem?.user_name }}</div>
    <div class="jz" style="color: #c5c5c5;font-size: 12px;">{{ zzitem?.summary }}</div>
    <div class="jz" style="font-size: 14px;box-sizing: border-box;padding: 0 20px;">{{ zzitem?.desc }}</div>
    <div class="jz">
        <div class="gz" @click="djjrgz">关注</div>
    </div>
    <div class="jz" style="font-size: 12px;color: #c5c5c5">{{ zzitem?.fans_total }}关注</div>
    <div class="ydwm" @click="tzwd(item)" v-for="(item, index) in zzyditem" :key="index">
        <!-- 阅读 -->
        <div style="height: 10px;background-color: #f7f7f7;margin: 10px 0;"></div>
        <div class="yd">- 问答 -</div>
        <div class="yd2">{{ item.title }}</div>
        <div class="yd3">{{ item.answerer?.user_name }}</div>
        <div class="dytext">{{ item.forward }}</div>
        <img class="yd4" :src="item.img_url" alt="">

        <van-row justify="space-between" style="margin: 10px 0;">
            <van-col span="12">

            </van-col>
            <van-col span="12" class="ybicon">
                <div style="display: flex;">
                    <!-- 爱心 -->
                    <svg t="1676608723950" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="11545" width="16" height="16">
                        <path
                            d="M533.504 268.288q33.792-41.984 71.68-75.776 32.768-27.648 74.24-50.176t86.528-19.456q63.488 5.12 105.984 30.208t67.584 63.488 34.304 87.04 6.144 99.84-17.92 97.792-36.864 87.04-48.64 74.752-53.248 61.952q-40.96 41.984-85.504 78.336t-84.992 62.464-73.728 41.472-51.712 15.36q-20.48 1.024-52.224-14.336t-69.632-41.472-79.872-61.952-82.944-75.776q-26.624-25.6-57.344-59.392t-57.856-74.24-46.592-87.552-21.504-100.352 11.264-99.84 39.936-83.456 65.536-61.952 88.064-35.328q24.576-5.12 49.152-1.536t48.128 12.288 45.056 22.016 40.96 27.648q45.056 33.792 86.016 80.896z"
                            p-id="11546" fill="#bfbfbf"></path>
                    </svg>
                    <div style="font-size: 12px;color: #b2b2b2;">{{ item.like_count }}</div>
                </div>
                <svg t="1676608738205" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="12587" width="16" height="16">
                    <path
                        d="M865.922728 583.211878c-16.276708 0-29.580712 13.246699-29.667693 29.727045l0 215.125569c0 17.992793-14.58723 32.637328-32.520671 32.637328L181.762717 860.70182c-17.935488 0-32.520671-14.645558-32.520671-32.637328L149.242046 292.155966c0-17.992793 14.586207-32.637328 32.520671-32.637328l291.230897 0c16.304338-0.029676 29.580712-13.363356 29.580712-29.724998 0-16.392342-13.276375-29.727045-29.610388-29.727045l-295.336402 0c-48.358381 0-87.721901 39.450501-87.721901 87.925538l0 544.205493c0 48.475038 39.36352 87.925538 87.721901 87.925538l630.239961 0c48.358381 0 87.720877-39.450501 87.720877-87.925538L895.588375 612.762915C895.501394 596.458577 882.19739 583.211878 865.922728 583.211878z"
                        fill="#bfbfbf" p-id="12588"></path>
                    <path
                        d="M930.818761 338.183256l0-0.318248L727.07645 133.511783l-6.435573-6.259564-0.814552 0.844228c-4.511757-2.532683-9.606799-3.873214-14.876826-3.873214-16.974603 0-30.774911 13.829983-30.774911 30.832216 0 5.298679 1.338485 10.393721 3.873214 14.907525l-0.903579 0.931209 141.845589 142.224212-145.573493 0.057305C436.396091 342.726735 378.197598 489.375723 361.049033 717.050096c0 17.004279 13.800307 30.832216 30.772864 30.832216 13.858636 0 25.620517-9.229199 29.464055-21.893636l1.397836-8.181333c18.022469-215.329207 60.470233-321.567833 251.839749-342.937536l144.466276 0L683.433464 510.804778l-5.502317 7.744381c-1.951445 4.104481-2.969635 9.112542-2.969635 13.654998 0 17.002232 13.799284 30.832216 30.772864 30.832216 4.832052 0 10.160407-1.164522 14.439874-3.37691L929.954067 350.740246c1.860371-1.305739 4.140297-4.52506 4.140297-6.970762C934.093341 341.323782 932.679132 339.488994 930.818761 338.183256z"
                        fill="#bfbfbf" p-id="12589"></path>
                </svg>
            </van-col>
        </van-row>
    </div>
</template>

<script setup>
import axios from '../plugins/axiosInstance';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'
const zzitem = ref('')
const zzyditem = ref('')
const router = useRouter()
const onClickLeft = () => history.back();
const tzwd = (item) => {
    localStorage.setItem('wendaId', JSON.stringify(item.item_id))
    router.push('/wenda')
}
const djjrgz = () => {
    
    // arr.push(JSON.parse(localStorage.getItem('zuozheitem')))
    // 从localStorage中获取zzitemlist的值
let arr = JSON.parse(localStorage.getItem('zzitemlist'))
// 如果是null就赋值为空数组
if (arr === null) {
  arr = []
}
// 定义一个变量来记录是否已经有zuozheitem
let hasZuozheitem = false
// 遍历数组中的每个元素
for (let i = 0; i < arr.length; i++) {
  // 比较它们是否相等
  if (JSON.stringify(arr[i]) === JSON.stringify(JSON.parse(localStorage.getItem('zuozheitem')))) {
    // 如果相等就把变量设为true，并且跳出循环
    hasZuozheitem = true
    break
  }
}
// 根据变量的值来决定是否要push zuozheitem到数组中
if (!hasZuozheitem) {
  arr.push(JSON.parse(localStorage.getItem('zuozheitem')))
}
// 把更新后的数组转换成字符串存回localStorage中
localStorage.setItem('zzitemlist', JSON.stringify(arr))
    
}
onMounted(() => {
    zzitem.value = JSON.parse(localStorage.getItem('zuozheitem'))
    console.log(zzitem);
    axios({
        url: `https://apis.netstart.cn/one/author/works?author_id=${zzitem.value.user_id}&page_num=0`,
        method: 'get'
    }).then((res) => {
        zzyditem.value = res.data.data
        console.log(zzyditem);
    }).catch(() => { })
})
</script>

<style lang="less" scoped>
.ydwm {
    box-sizing: border-box;
    padding: 10px;
}

.yd {
    width: 100%;
    height: 20px;
    color: #b1b1b1;
    font-size: 12px;
    text-align: center;
    margin: 20px 0;
}

.yd2 {
    font-weight: 600;

}

.yd3 {
    color: #b1b1b1;
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 20px;
}

.dytext {
    font-size: 14px;
    color: #818181;
    margin-bottom: 20px;
}

.yd4 {
    width: 100%;
    border-radius: 10px;
}

.gdt {
    height: 10px;
    background-color: #f7f7f7;
    width: 100%;
}

.gdt2 {
    height: 5px;
}

.ybicon {
    display: flex;
    justify-content: space-evenly;
}

.jz {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.gz {
    width: 60px;
    height: 25px;
    border: 1px solid#999999;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>